import React from 'react';
import useMonitoringModel from '../../useModels/useMonitoringModel.js';
import { Table } from 'antd';
import styles from './index.less';
import classnames from 'classnames';
import moment from 'moment';

const AlarmTable = () => {
  const { alarmList, selectedRowKeys, setMonitorState } = useMonitoringModel(model => [
    model.alarmList,
    model.selectedRowKeys,
  ]);
  const columns = [
    {
      title: '告警序号',
      align: 'center',
      dataIndex: 'serialNo',
      ellipsis: true,
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: 'FSUID',
      align: 'center',
      dataIndex: 'suId',
      ellipsis: true,
      width: '12%',
      key: 'suId',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: '设备ID',
      align: 'center',
      ellipsis: true,
      dataIndex: 'deviceId',
      key: 'deviceId',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: '监控点名称',
      align: 'center',
      dataIndex: 'spName',
      ellipsis: true,
      key: 'spName',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: '开始时间',
      align: 'center',
      sorter: (a, b) => a.reportTime - b.reportTime,
      dataIndex: 'startTime',
      key: 'startTime',
      width: 145,
      ellipsis: true,
      render: (text, row, index) => {
        return (
          <span style={{ lineHeight: '22px' }}>
            {text ? moment(text).format('YYYY-MM-DD  hh:mm:ss') : '-'}
          </span>
        );
      },
    },
    {
      title: '结束时间',
      align: 'center',
      sorter: (a, b) => a.reportTime - b.reportTime,
      dataIndex: 'endTime',
      key: 'endTime',
      width: 145,
      ellipsis: true,
      render: (text, row, index) => {
        return (
          <span style={{ lineHeight: '22px' }}>
            {text ? moment(text).format('YYYY-MM-DD  hh:mm:ss') : '-'}
          </span>
        );
      },
    },
    {
      title: '告警等级',
      align: 'center',
      dataIndex: 'alarmLevel',
      width: 70,
      key: 'alarmLevel',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: '告警标志',
      align: 'center',
      width: 70,
      dataIndex: 'alarmFlag',
      key: 'alarmFlag',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: '告警描述',
      align: 'center',
      width: '15%',
      dataIndex: 'alarmDesc',
      ellipsis: true,
      key: 'alarmDesc',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    // {
    //   title: '值',
    //   align: 'center',
    //   dataIndex: 'seriaTriggerValNo',
    //   sorter: (a, b) => a.value - b.value,
    //   key: 'triggerVal',
    //   render: (text, row, index) => {
    //     return <>{text || '-'}</>;
    //   },
    // },
  ];

  return (
    <Table
      className={classnames(styles['table-wrap'], styles['alarm-height'])}
      columns={columns}
      dataSource={alarmList}
      scroll={{ y: 204 }}
      rowSelection={{
        selectedRowKeys,
        onChange: selectedRowKeys => {
          setMonitorState({ selectedRowKeys });
        },
      }}
      rowKey={'id'}
      pagination={false}
    />
  );
};
export default AlarmTable;
